<template>
  <div>
    <basic-container>
      <avue-tabs :option="option"
                 v-model="form"
                 @change="handleChange"
                 @submit="handleSubmit"></avue-tabs>
    </basic-container>
  </div>
</template>

<script>
    import {getUserInfo, update, updatePassword} from "@/api/system/user";
    export default {
        data() {
            return {
                type: "info",
                option: {
                    column: [{
                        label: '个人信息',
                        prop: 'info',
                        option: {
                            submitText: '修改',
                            column: [{
                                label: '头像',
                                type: 'upload',
                                listType: 'picture-img',
                                propsHttp: {
                                    res: 'data',
                                    url: 'link',
                                },
                                canvasOption: {
                                    text: 'Blade',
                                    ratio: 0.1
                                },
                                action: '/api/blade-resource/oss/endpoint/put-file',
                                tip: '只能上传jpg/png用户头像，且不超过500kb',
                                span: 12,
                                row: true,
                                prop: 'avatar'
                            }, {
                                label: '姓名',
                                span: 12,
                                row: true,
                                prop: 'name'
                            }, {
                                label: '用户名',
                                span: 12,
                                row: true,
                                prop: 'realName'
                            }, {
                                label: '手机号',
                                span: 12,
                                row: true,
                                prop: 'phone'
                            }, {
                                label: '邮箱',
                                prop: 'email',
                                span: 12,
                                row: true,
                            }]
                        }
                    }, {
                        label: '修改密码',
                        prop: 'password',
                        option: {
                            submitText: '修改',
                            column: [{
                                label: '原密码',
                                span: 12,
                                row: true,
                                type: 'password',
                                prop: 'oldPassword'
                            }, {
                                label: '新密码',
                                span: 12,
                                row: true,
                                type: 'password',
                                prop: 'newPassword'
                            }, {
                                label: '确认密码',
                                span: 12,
                                row: true,
                                type: 'password',
                                prop: 'newPassword1'
                            }]
                        }
                    }]
                },
                form: {
                    avatar: 'http://img5.imgtn.bdimg.com/it/u=244217739,3002561510&fm=26&gp=0.jpg',
                    email: "admin@blade.vip",
                    id: "1123598821738675201",
                    name: "管理员",
                    phone: "123333333355",
                    realName: "管理员"
                }
            };
        },
        created() {
            this.handleWitch();
        },
        methods: {
            handleSubmit() {
                if (this.type === "info") {
                    update(this.form).then(res => {
                        if (res.data.success) {
                            this.$message({
                                type: "success",
                                message: "修改信息成功!"
                            });
                        } else {
                            this.$message({
                                type: "error",
                                message: res.data.msg
                            });
                        }
                    })
                } else {
                    updatePassword(this.form.oldPassword, this.form.newPassword, this.form.newPassword1).then(res => {
                        if (res.data.success) {
                            this.$message({
                                type: "success",
                                message: "修改密码成功!"
                            });
                        } else {
                            this.$message({
                                type: "error",
                                message: res.data.msg
                            });
                        }
                    })
                }
            },
            handleWitch() {
                if (this.type == "info") {
                    getUserInfo().then(res => {
                        const user = res.data.data;
                        this.form = {
                            id: user.id,
                            avatar: user.avatar,
                            name: user.name,
                            realName: user.realName,
                            phone: user.phone,
                            email: user.email,
                        }
                    });
                }
            },
            handleChange(item) {
                this.type = item.prop;
                this.handleWitch();
            }
        }
    };
</script>

<style>
</style>
